#viewer{
	position: fixed;
	z-index: 1000000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}
#viewer-box{
	width: 100%;
	height: 100%;
	position: relative;
	color: #ccc;
	-webkit-transform: translate3d(-100%, 0, 0 );
	-webkit-transition: -webkit-transform .25s ease-in-out;
	.viewer-box-l{
		background: rgba(20,20,20,0.9);
		width: 80%;
		height: 100%;
		float: left;
		.viewer-box-wrap{
			margin: 20px 10px 0px 20px;
		}
		.viewer-title{
			line-height: 32px;
			&:before{
				content: "";
				width: 6px;
				height: 6px;
				border: 1px solid #999;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				background: #aaa;
				display: inline-block;
				margin-right: 10px;
			}
		}
		.viewer-div{
			border-bottom: 1px dotted #666;
			padding-bottom: 13px;
			line-height: 20px;
			&:last-child{
				border-bottom: none;
			}
			.switch-friends-link{
				line-height: 20px;
			}
		}
	}
	.viewer-box-r{
		background: rgba(0,0,0,0);
		width: 20%;
		height: 100%;
		float: right;
	}
}
#viewer-box.anm-swipe{
	-webkit-transform:  translate3d(0, 0, 0);
	.viewer-box-r{
		background: rgba(0,0,0,0);
	}
}
.hide{
	display: none;
}
#viewer-box .viewer-list{
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}